<template>
    <div class="personnelNumber">
        <!-- <div class="tips">统计周期：2018.03.01-2018.04.01</div> -->
        <div class="head">
          <div class="left">
            <img src="../../../../../../static/img/rl/img1.png" />
            <div class="txt">
              <p>实时人员数量</p>
              <p>{{totalData.peopleNum}}</p>
            </div>
          </div>
          <em></em>
          <div class="right">
            <ul class="dataList">
              <li>
                <img src="../../../../../../static/img/rl/img5.png">
                <div class="txt">
                  <p>期初人力</p>
                  <p>{{totalData.earlyStageNum}}</p>
                </div>
              </li>
              <li>
                <img src="../../../../../../static/img/rl/img4.png">
                <div class="txt">
                  <p>期末人力</p>
                  <p>{{totalData.terminalNum}}</p>
                </div>
              </li>
              <li>
                <img src="../../../../../../static/img/rl/img3.png">
                <div class="txt">
                  <p>净增长人数</p>
                  <p>{{totalData.netGrowthNum}}</p>
                </div>
              </li>
              <li>
                <img src="../../../../../../static/img/rl/img2.png">
                <div class="txt">
                  <p>员工增长率</p>
                  <p>{{totalData.netGrowthRate}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 各版块期末起初人力 / 本年人员数量增长趋势 -->
        <div class="dataView">
          <div class="border">
            <span>各版块期末起初人力</span>
            <span>本年人员数量增长趋势</span>
          </div>
          <!-- 人员数量 -->
          <div class="staffNum">
            <p class="title">人员数量</p>
            <div class="chart">
              <bar-charts slot="main" v-model="peopleArr" :option="mobilityOption" :chartStyle="'width:100%;min-height:280px;'"></bar-charts>
            </div>
          </div>
          <!-- 新增人数 / 减少人数 / 净增长人数 / 员工增长率 -->
          <div class="peopleNumState">
            <div class="peopleNum">
              <block-title><span slot="title">新增人数</span></block-title>
              <div class="chart">
                <pie-chart v-model="addNumberArr" :option="seniorityOption" :chartStyle="'min-height:210px;'"></pie-chart>
              </div>
            </div>
            <em></em>
            <div class="peopleNum">
              <block-title><span slot="title">减少人数</span></block-title>
              <div class="chart">
                <pie-chart v-model="reduceNumberArr" :option="seniorityOption" :chartStyle="'min-height:210px;'"></pie-chart>
              </div>
            </div>
            <em></em>
            <div class="peopleNum">
              <block-title><span slot="title">净增长人数</span></block-title>
              <div class="chart">
                <ball-chart v-model="netIncrease"></ball-chart>
              </div>
            </div>
            <em></em>
            <div class="peopleNum"> 
              <block-title><span slot="title">员工增长率</span></block-title>
              <div class="chart">
                  <bar-chart v-model="staffGrowthRate" :option="staffGrowthOption" :chartStyle="'min-height:210px;'"></bar-chart>
              </div>
            </div>
          </div>
        </div>
    </div>
</template>
<script>
import pieChart from "@/components/Charts/pieChart";
import barChart from "@/components/Charts/barChart";
import blockTitle from "@/components/rl/blockTitle";
import barCharts from "@/components/Charts/barCharts";
import ballChart from "@/components/Charts/ballChart.vue";
import {
  GetDataByTarget,
  GetTerminalearlyStageData,
  GetNetGrowth
} from "@/api/rl/index";
export default {
  components: {
    blockTitle,
    barChart,
    ballChart,
    barCharts,
    pieChart
  },
  data() {
    return {
      netIncrease: [],
      totalData: {
        peopleNum: 0,
        earlyStageNum: 0,
        terminalNum: 0,
        netGrowthNum: 0,
        netGrowthRate: 0,
        list: []
      },
      mobilityOption: {
        hidePieMargin: true,
        color: ["#29AAE1", "#22B473"],
        legend: {
          top: "80%"
        },
        grid: {
          top: 20,
          left: "3%"
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        labelDefault: 1,
        startColor: ["#0071BC", "#29AAE1"],
        endColor: ["#006837", "#22B473"]
      },
      // 人员数量
      peopleArr: [],
      // 员工增长率
      staffGrowthRate: [],
      staffGrowthOption: {
        grid: {
          top: 20,
          width: 230,
          height: 120
        },
        xAxis: {
          axisLabel: {
            rotate: -45
          }
        },
        // showUnit: true,
        unit: "%"
      },
      // 减少人数
      reduceNumberArr: [],
      // 新增人数
      addNumberArr: [],
      seniorityOption: {
        color: [
          "#EE3F86",
          "#29AAE1",
          "#FAAF3B",
          "#22B473",
          "#435EFF",
          "#7F47DC",
          "#F05A24"
        ],
        radius: ["35%", "50%"],
        center: ["50%", "40%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return (
            "{value|" + value.name + "}"
            // "{value|" + value.name + "}" + "\n" + "{large|" + value.value + "}"
          );
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    // 获取总数据
    async fetchTotalData() {
      try {
        var res = await GetTerminalearlyStageData();
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "totalData", result);
          this.$set(this, "peopleArr", result.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 减少人数
    async fetchReduceNumberArr() {
      try {
        var params = {
          timeQueryType: "48003",
          queryType: "10011"
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "reduceNumberArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 新增人数
    async fetchAddNumberArr() {
      try {
        var params = {
          timeQueryType: "48002",
          queryType: "10011"
        };
        var res = await GetDataByTarget(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          console.log(JSON.stringify(result));
          this.$set(this, "addNumberArr", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 员工增长率
    async fetchStaffGrowthRate() {
      try {
        var params = {
          queryType: "10020"
        };
        var res = await GetNetGrowth(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "staffGrowthRate", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 净增长人数
    async fetchNetIncrease() {
      try {
        var params = {
          queryType: "10019"
        };
        var res = await GetNetGrowth(params);
        if (res.data.code === "0") {
          var result = res.data.result;
          this.$set(this, "netIncrease", result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    fetchData() {
      this.fetchTotalData(); // 获取总数据
      this.fetchReduceNumberArr(); // 减少人数
      this.fetchAddNumberArr(); // 新增人数
      this.fetchStaffGrowthRate(); // 员工增长率
      this.fetchNetIncrease(); // 员工增人数
    }
  }
};
</script>
<style lang="scss">
@import "../../../../../styles/base/_parameters";
.peopleNum {
  .chart {
    div {
      & > div {
        display: flex;
        flex-direction: column;
        p {
          height: 15px;
          font-size: 12px;
          &:nth-of-type(1) {
            white-space: nowrap;
          }
          &:nth-of-type(2) {
            @include din(16px);
          }
        }
      }
    }
  }
}
</style>

<style scoped lang="scss">
@import "../../../../../styles/base/_parameters";
$tipsColor: rgba(#29aae1, 0.8);
$lineBack: rgba(#29aae1, 0.2);
$color1: #fbb03b;
$color2: #22b473;
$color3: #f05a24;
$color4: #ee3f86;
$color5: #29aae1;

.personnelNumber {
  @include absoluteAllSides(22, 0, 18, 0, 1);
  .tips {
    margin-right: 24px;
    color: $tipsColor;
    font-size: 16px;
    text-align: right;
  }
  .head {
    display: flex;
    align-items: center;
    height: 240px;
    .left {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      img {
        width: 119px;
        height: 95px;
      }
      .txt {
        margin-left: 18px;
        color: $color1;
        p:nth-of-type(1) {
          font-size: 30px;
        }
        p:nth-of-type(2) {
          @include din(75px);
          line-height: 1;
        }
      }
    }
    em {
      display: inline-block;
      width: 1px;
      height: 120px;
      background-color: $lineBack;
    }
    .right {
      width: 50%;
      .dataList {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        li {
          display: flex;
          align-items: center;
          width: 40%;
          img {
            width: 64px;
            height: 64px;
          }
          .txt {
            margin-left: 10px;
            p:nth-of-type(1) {
              font-size: 20px;
            }
            p:nth-of-type(2) {
              @include din(46px);
              line-height: 1;
            }
          }
        }
        li:nth-of-type(1) {
          margin-bottom: 35px;
          .txt {
            color: $color2;
          }
        }
        li:nth-of-type(2) {
          margin-bottom: 35px;
          .txt {
            color: $color3;
          }
        }
        li:nth-of-type(3) {
          .txt {
            color: $color4;
          }
        }
        li:nth-of-type(4) {
          .txt {
            color: $color5;
          }
        }
      }
    }
  }
  // 各版块期末起初人力 / 本年人员数量增长趋势
  .dataView {
    .border {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 55px;
      line-height: 55px;
      color: $color5;
      font-size: 22px;
      background: url("../../../../../../static/img/rl/border3.png") left center
        no-repeat;
      background-size: 100%;
      span:nth-of-type(1) {
        position: absolute;
        left: 120px;
        z-index: 1;
      }
      span:nth-of-type(2) {
        position: absolute;
        left: 370px;
        z-index: 1;
      }
    }
    // 人员数量
    .staffNum {
      padding-left: 46px;
      padding-right: 24px;
      .title {
        color: $color5;
        font-size: 16px;
      }
      .chart {
        height: 280px;
      }
    }
    // 新增人数 / 减少人数 / 净增长人数 / 员工增长率
    .peopleNumState {
      display: flex;
      align-items: center;
      padding: 0 30px;
      .peopleNum {
        width: calc(100% / 4 - 28px);
        .chart {
          height: 210px;
          margin-top: 20px;
        }
      }
      em {
        width: 1px;
        height: 210px;
        margin: 0 26px;
        background-color: $lineBack;
      }
    }
  }
}
</style>
